"use client"

import {useEffect, useState} from "react";
import {Button} from "@nextui-org/react";
import {useTheme} from "next-themes";
import {SunMoon, Moon} from "lucide-react"

export default function ThemeSwitcher(){
    const {theme, setTheme} = useTheme()
    const [mounted, setMounted] = useState(false)

    useEffect(() => {
        setMounted(true)
    }, [])

    if (!mounted) return null;

    return (
        <div>
            <Button isIconOnly color="warning" variant="faded" aria-label="Take a photo" onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
                {
                    theme === "dark" ? <Moon size={30}/> : <SunMoon size={30}/>
                }
            </Button>
        </div>
    )
}